var arr = [];
var carArr = [];
window.onload = function(){
    showGoodsList(getLocalGoodsListData());
    render(getLocalCartData())
}


//获取本地商品数据
function getLocalGoodsListData(){
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}


//获取本地购物车数据
function getLocalCartData(){
	carArr = localStorage.carArr ? JSON.parse(localStorage.carArr) : []
	return carArr;
}


//渲染商品列表
function showGoodsList(arr){
    var list_ul = document.querySelector(".list_ul");
    list_ul.innerHTML = "";

    for(var i = 0;i<arr.length;i++){
        list_ul.innerHTML +=
        `
        <li data-id="${ arr[i].goodsid }">
				<img src="${ arr[i].image }" >
				<div class="good_title mt5">
					${ arr[i].name }
				</div>
				<div class="price mt5">
					${ arr[i].price }元
				</div>
				<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
					加入购物车
				</button>
			</li>
        `;
    }

}


//点击加入购物车，将购物车数据保存至本地
function addCart(goodsid,img,goodsName,price){
	//点击添加购物车，默认+1
	var count = 1;
	//商品小计
	var xiaoji = price/1*count;

	//所有信息存放至对象
	var obj = {
		id : goodsid,
		src : img,
		title : goodsName,
		price : price,
		count : count,
		xiaoji : xiaoji,
		time : new Date().toLocaleString()
	}
	addData(obj)
}

function addData(obj){
	carArr = getLocalCartData()
	var result = carArr.some(function(item,index){
		return item.id === obj.id
	})
	if(result){
		jia(obj.id);
		return;
	}
	carArr.push(obj)
	localStorage.carArr = JSON.stringify(carArr)
	// console.log(carArr)
	render(carArr)
}


//渲染购物车列表
function render(carArr){
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = ''
	var str = ''
	var sum = 0;
	console.log(carArr)
	for(var i= 0;i<carArr.length;i++){
		str += `
		<tr>
                <td>
                    <input type="checkbox" name="" id="" value="" data-id="${ carArr[i].id }" class="danxuan"/>
                </td>
                <td>
                    <p>
                        <img src="${carArr[i].src}" >
                        <br>
                        <span>${carArr[i].title}</span>
                    </p>
                </td>
                <td>
                    <button type="button" class="btn" onclick = "jian(${carArr[i].id})">-</button>
                    <input type="text" name="" id="" value="${carArr[i].count}" class="count"/>
                    <button type="button" class="btn" onclick = "jia(${carArr[i].id})">+</button>
                </td>
                <td>
                    <span>${carArr[i].price}元</span>
                </td>
                <td>
                    ${carArr[i].xiaoji}
                </td>
                <td>
                    <button type="button" onclick = "del(${carArr[i].id})">删除</button>
                </td>
                <td>
                    ${carArr[i].time}
                </td>
            </tr>
            
		`;
		tbody.innerHTML = str;
		sum = sum / 1 +carArr[i].xiaoji / 1
	}
	document.getElementById("sum").innerHTML = sum;
}


//点击减号，购物车物品减 1
function jian(id){
	carArr = getLocalCartData();
	carArr.forEach(function(item,index){
		if(item.id == id){
			if(item.count>1){
				item.count --;
				item.xiaoji = (item.price/1*item.count).toFixed(2);
			}
		}
	})
	localStorage.carArr = JSON.stringify(carArr)
	render(carArr)
}


//点击加号，购物车物品加 1
function jia(id){
	carArr = getLocalCartData();
	carArr.forEach(function(item,index){
		if(item.id == id){
			item.count ++;
			item.xiaoji = (item.price/1*item.count).toFixed(2)
		}
	})
	localStorage.carArr = JSON.stringify(carArr)
	render(carArr)
}


// 点击删除，删除本行购物车商品
function del(id){
	carArr = getLocalCartData();
	carArr = carArr.filter(function(item,index){
		return item.id != id
	})
	localStorage.carArr = JSON.stringify(carArr)
	render(getLocalCartData())
}


//点击全选按钮，选中购物车所有商品
var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function(){
	var danxuanAll = document.querySelectorAll(".danxuan");
	for(var index = 0; index < danxuanAll.length; index++){
		danxuanAll[index].checked = quanxuan.checked;
	}
}


// 点击删除选中商品，删除购物车中已选中的商品
var delChecked = document.getElementById("delChecked");
delChecked.onclick = function(){
	carArr = getLocalCartData()
	var danxuanChecked = document.querySelectorAll(".danxuan:checked")
	for(var i = 0;i<danxuanChecked.length;i++){

		carArr.forEach(function(item,index){
			if(item.id === danxuanChecked[i].getAttribute("data-id")){
				carArr.splice(index,1)
			}
		})
	}
	localStorage.carArr = JSON.stringify(carArr)
	render(getLocalCartData())
}